import { UploadOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProColumns,
  ProForm,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, message, Tabs, Upload } from 'antd';
import React, { useRef, useState } from 'react';
import { EmployeeModel } from '../data';
import { createemployee } from '../service';

export type EditFormProps = {
  trigger?: JSX.Element;
  onOk?: () => void;
  initialValues?: Partial<EmployeeModel.employeeResponse>;
};

const EditForm: React.FC<EditFormProps> = ({ onOk, trigger, initialValues }) => {
  const editFormRef = useRef<ProFormInstance>();
  const [messageApi, contextHolder] = message.useMessage();
  const [modalVisit, setModalVisit] = useState(false);
  /* const intl = useIntl(); */

  const { run, loading } = useRequest(createemployee, {
    manual: true,
    onSuccess: () => {
      messageApi.success('Added successfully');
      onOk?.();
      setModalVisit(true);
      editFormRef.current?.resetFields();
    },
    onError: () => {
      messageApi.error('Adding failed, please try again!');
    },
  });

  let ruleData: EmployeeModel.ruleModel[] = [];

  const ruleColumns: ProColumns<EmployeeModel.ruleModel>[] = [
    {
      title: '规则名称',
      dataIndex: 'ruleName',
      key: 'ruleName',
    },
    {
      title: '授权方式',
      dataIndex: 'method',
      key: 'method',
    },
  ];

  const openChange = (value: boolean) => {
    setModalVisit(value);
    editFormRef.current?.resetFields();
  };

  const items = [
    {
      key: '1',
      label: '基础信息',
      children: (
        <>
          <ProForm.Group>
            <ProFormText
              name="employeeId"
              label="工号"
              rules={[{ required: true, message: '请输入工号' }]}
              placeholder="请输入工号"
              width="md"
            />
            <ProFormText
              width="md"
              name="username"
              label="用户名"
              rules={[{ required: true, message: '请输入用户名' }]}
              placeholder="请输入用户名"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              width="md"
              name="cardNumber"
              label="卡号"
              rules={[{ required: true, message: '请输入卡号' }]}
              placeholder="请输入卡号"
            />
            <ProFormSelect
              width="md"
              name="department"
              label="部门"
              rules={[{ required: true, message: '请选择部门' }]}
              placeholder="请选择部门"
              options={[
                { label: '总部门', value: '总部门' },
                { label: '部门1', value: '部门1' },
                { label: '部门2', value: '部门2' },
              ]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormSelect
              width="md"
              name="role"
              label="角色"
              rules={[{ required: true, message: '请选择角色' }]}
              placeholder="请选择角色"
              options={[
                { label: '正式员工', value: '正式员工' },
                { label: '临时员工', value: '临时员工' },
              ]}
            />
            <ProFormSelect
              width="md"
              name="deviceAccess"
              label="设备权限"
              placeholder="请选择设备权限"
              options={[
                { label: '普通用户', value: '普通用户' },
                { label: '管理员', value: '管理员' },
              ]}
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProFormText
              width="md"
              name="devicePassword"
              label="设备密码"
              placeholder="请输入设备密码"
            />
          </ProForm.Group>
          <ProForm.Group>
            <ProForm.Item label="照片头像">
              <Upload>
                <Button icon={<UploadOutlined />}>上传</Button>
              </Upload>
            </ProForm.Item>
            <ProForm.Item label="人脸照片">
              <Upload>
                <Button icon={<UploadOutlined />}>上传</Button>
              </Upload>
            </ProForm.Item>
          </ProForm.Group>
        </>
      ),
    },
    {
      key: '2',
      label: '扩展信息',
      children: (
        <ProForm.Group>
          <ProFormSelect
            width="md"
            name="gender"
            label="性别"
            rules={[{ required: true, message: '请选择' }]}
            placeholder="请选择"
            options={[
              { label: '男', value: '0' },
              { label: '女', value: '1' },
            ]}
          />
          <ProFormSelect
            width="md"
            name="deviceAccess"
            label="设备权限"
            placeholder="请选择设备权限"
            options={[
              { label: '普通用户', value: '普通用户' },
              { label: '管理员', value: '管理员' },
            ]}
          />
        </ProForm.Group>
      ),
    },
    {
      key: '3',
      label: '门禁权限',
      children: (
        <ProTable
          style={{ marginBottom: 24 }}
          pagination={false}
          search={false}
          loading={false} // Replace with your loading state
          options={false}
          toolBarRender={false}
          dataSource={ruleData}
          columns={ruleColumns}
          rowKey="id"
        />
      ),
    },
    {
      key: '4',
      label: '生物模板采集',
      children: <p>这里是生物模板采集内容</p>,
    },
  ];

  return (
    <>
      {contextHolder}
      <ModalForm
        initialValues={initialValues}
        style={{ height: '500px', overflow: 'auto' }}
        formRef={editFormRef}
        title={initialValues ? '修改' : '新增'}
        open={modalVisit}
        onOpenChange={openChange}
        trigger={trigger}
        modalProps={{
          onCancel: () => {},
          okText: '保存',
          okButtonProps: { loading },
        }}
        onFinish={async (value: EmployeeModel.employeeResponse) => {
          await run(value);
          return true;
        }}
        submitter={{
          render: (props, defaultDoms) => {
            return [
              ...defaultDoms,
              <Button
                key="saveAndContinue"
                type="primary"
                onClick={() => run(editFormRef.current?.validateFieldsReturnFormatValue?.())}
              >
                保存并继续
              </Button>,
            ];
          },
        }}
      >
        <Tabs defaultActiveKey="1" items={items} />
      </ModalForm>
    </>
  );
};

export default EditForm;
